<!DOCTYPE html>
<html lang="zh_cn">
<head>
	<meta charset="UTF-8">
	<title>物理小实验</title>
</head>
<body>
	<canvas id="c1" style="border: solid 1px gray; margin: 10px auto;display: block;"></canvas>	
</body>
<script type="text/javascript">
	b1 = {
		x:0,
		y:100,
		r:6,
		vx:5,
		vy:0,
		ay:0.8,
		ax:0,
		style:"red"
	}

	window.onload = function () {
		var canvas = document.getElementById('c1');
		canvas.width = 800;
		canvas.height = 500;
		var ctx = canvas.getContext('2d');

		var clock1 = setInterval(function () {
			var pre = {x:b1.x-b1.vx,y:b1.y-b1.vy,vy:b1.vy-b1.ay};
			// 绘图
			render(b1,ctx);
			updata(b1);
			if(b1.y >= canvas.height-b1.r){
				b1.y = canvas.height-b1.r;
				b1.vy = -1*b1.vy*0.8;
			}
		}, 50);

	}

	function render(b1,ctx) {
		ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
		//clearArea(b1.x-b1.vx,b1.y-b1.vy,b1.r,ctx);
		drawBall(b1.x,b1.y,b1.r,ctx,b1.style);
	}
	function updata(b1) {
		b1.x += b1.vx;
		b1.y += b1.vy;
		b1.vy += b1.ay;
		
	}
	/**
	 * 画一个球
	 * @param   {int} x    位置横坐标
	 * @param   {int} y    位置纵坐标
	 * @param   r     半径
	 * @param   {obj} ctx 绘图上下文
	 * @return {[type]}     [description]
	 */
	function drawBall(x,y,r,ctx,style="gray") {
		ctx.fillStyle = style;
		ctx.beginPath();
		ctx.arc(x,y,r,0,2*Math.PI);
		ctx.closePath();
		ctx.fill();
	}

	function clearArea(x,y,l,ctx) {
		ctx.clearRect(x,y,x+l,y+l); // 擦除界面
	}
</script>
</html>